<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="首页" name="first">
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="(url, index) in urls" :key="index">
            <el-image :src="url" style="width: 100%; height: 100%; object-fit: cover;"></el-image>
          </el-carousel-item>
        </el-carousel>
        <!-- 日历 -->
        <el-row>
          <el-col :span="10">
            <span style="font-size: 30px;color: blue;">校历</span>
            <el-calendar v-model="value"
              style="transform: scale(0.7); transform-origin: top left; height: 400px;font-size: 40px;">
            </el-calendar>
          </el-col>
          <el-col :span="14">
            <el-card style="width: 650px;" :body-style="{ padding: '2px' }">
              <img src="https://img0.baidu.com/it/u=2561593175,2507889670&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=500"
                class="image" style="width: 100%; height: 400px; object-fit: cover;">
              <div style="padding: 2px;">
                <span style="font-weight: bold;font-size: 20px;">学校平面图</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="学生详情" name="second">
        <el-form :inline="true" :model="tableData" class="demo-form-inline">
          <el-row>
            <!-- 输入框开始 -->
            <el-col :span="20">
              <el-form-item>
                <el-input v-model="searchForm.name" placeholder="请输入学生姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-col>
            <!-- 输入框结束 -->
            <!-- 录入按钮区域 -->
            <el-col :span="4" style="text-align:right;">
              <el-form-item>
                <el-button @click="openDrawer" type="primary" style="margin-left: 16px;">录入</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 学生详情页面开始 -->
        <el-table :data="tableData" border style="width: 100%" height="550" :row-class-name="tableRowClassName">
          <el-table-column type="index" :index="1" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="studentId" label="学号" align="center">
          </el-table-column>
          <el-table-column prop="college" label="学院" align="center">
          </el-table-column>
          <el-table-column prop="major" label="专业" align="center">
          </el-table-column>
          <el-table-column prop="birthDate" label="出生日期" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="手机号码" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-link type="danger" @click="handleDelete(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 学生详情页面结束 -->
      </el-tab-pane>
    </el-tabs>
    <!-- 抽屉开始 抽屉关闭时重置表单-->
    <el-drawer title="录入学生信息" :visible.sync="drawer" direction="rtl">
      <el-form :model="drawerForm" label-width="120px">
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="姓名">
              <el-input v-model="drawerForm.name" placeholder="请输入学生姓名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="drawerForm.studentId" placeholder="请输入学生学号（如2023001）" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="drawerForm.major" placeholder="请输入学生专业" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学院">
              <el-input v-model="drawerForm.college" placeholder="请输入学生学院" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker v-model="drawerForm.birthDate" type="date" placeholder="选择出生日期"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="drawerForm.phone" placeholder="请输入学生手机号码" autocomplete="off" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitStudentInfo">保存</el-button>
              <el-button @click="drawer = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
    <!-- 抽屉结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 默认开始页面为首页
      activeName: 'first',
      // 默认抽屉显示为关闭
      drawer: false,
      searchForm: { name: '' },
      tableData: [{
        name: '张伟',
        studentId: '2023001',
        phone: '13800138001',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-03-15'
      },
      {
        name: '李娜',
        studentId: '2023002',
        phone: '13800138002',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-04-22'
      },
      {
        name: '王芳',
        studentId: '2023003',
        phone: '13800138003',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-05-30'
      },
      {
        name: '刘伟',
        studentId: '2023004',
        phone: '13800138004',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-01-18'
      },
      {
        name: '陈静',
        studentId: '2023005',
        phone: '13800138005',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-02-05'
      },
      {
        name: '张明',
        studentId: '2023006',
        phone: '13800138006',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-06-12'
      },
      {
        name: '王丽',
        studentId: '2023007',
        phone: '13800138007',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-07-28'
      },
      {
        name: '李强',
        studentId: '2023008',
        phone: '13800138008',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-08-09'
      },
      {
        name: '赵静',
        studentId: '2023009',
        phone: '13800138009',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-09-17'
      },
      {
        name: '刘洋',
        studentId: '2023010',
        phone: '13800138010',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-10-25'
      },
      {
        name: '孙颖',
        studentId: '2023011',
        phone: '13800138011',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-11-03'
      },
      {
        name: '周杰',
        studentId: '2023012',
        phone: '13800138012',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2005-12-19'
      },
      {
        name: '吴敏',
        studentId: '2023013',
        phone: '13800138013',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2006-01-27'
      },
      {
        name: '郑华',
        studentId: '2023014',
        phone: '13800138014',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2006-02-14'
      },
      {
        name: '马丽',
        studentId: '2023015',
        phone: '13800138015',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2006-03-08'
      },
      {
        name: '朱强',
        studentId: '2023016',
        phone: '13800138016',
        major: '计算机科学与技术',
        college: '信息工程学院',
        grade: '23级',
        birthDate: '2006-04-20'
      },],
      originalTableData: [],
      // 轮播图数据
      value: new Date(),
      urls: [
        'https://ykcx.bttc.edu.cn/__local/9/13/4C/65A59829AD320D9CECD483F8848_B00DDB55_2653E.jpg',
        'https://wxy.bttc.edu.cn/__local/9/E1/43/A765A3763790047AE1DB6F034B9_579B6C4A_1A23C.jpg',
        'https://img2.baidu.com/it/u=1607495313,3824166093&fm=253&app=138&f=JPEG?w=743&h=500',
        'https://pic.rmb.bdstatic.com/bjh/news/b3090d8b6fe13192674dba91af8b4e511564.jpeg',

      ],
      // 2. 新增：抽屉表单数据（与表格字段对应）
      drawerForm: {
        name: '',        // 姓名
        studentId: '',   // 学号
        major: '',       // 专业
        college: '',     // 学院
        birthDate: '',   // 出生日期（格式：YYYY-MM-DD）
        phone: ''        // 手机号码
      },
    }
  },
  computed: {
    // 新增：当前日期（用于平面图下方显示）
    currentDate() {
      return new Date().toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    }
  },
  methods: {
    // 表格行样式
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? 'warning-row' : 'success-row';
    },
    handleClick() { },
    // 查询（可选：补充姓名模糊查询功能）
    onSubmit() {
      const keyword = this.searchForm.name.trim().toLowerCase();
      if (!keyword) {
        // 若需恢复原始数据，需先在data中存储原始数据（如originalTableData）
        this.tableData = this.originalTableData;
        return;
      }
      // 模糊匹配姓名
      this.tableData = this.tableData.filter(item =>
        item.name.toLowerCase().includes(keyword)
      );
    },
    // 新增：打开抽屉前清空表单
    openDrawer() {
      this.drawer = true;
      // 延迟清空（确保抽屉渲染完成）
      this.$nextTick(() => {
        this.drawerForm = {
          name: '',
          studentId: '',
          major: '',
          college: '',
          grade: '',
          birthDate: '',
          phone: ''
        };
      });
    },
    // 核心：保存学生信息到表格
    submitStudentInfo() {
      // 1. 处理出生日期格式（统一为YYYY-MM-DD，与表格原始数据一致）
      const newStudent = { ...this.drawerForm };
      if (newStudent.birthDate instanceof Date) {
        newStudent.birthDate = newStudent.birthDate.toISOString().split('T')[0];
      }

      // 2. 将新数据添加到表格（unshift添加到顶部，push添加到底部）
      this.tableData.unshift(newStudent);

      // 3. 关闭抽屉并提示成功
      this.drawer = false;
      this.$message({
        type: 'success',
        message: '学生信息录入成功！'
      });

      // 4. 清空表单（方便下次录入）
      this.drawerForm = {
        name: '',
        studentId: '',
        major: '',
        college: '',
        grade: '',
        birthDate: '',
        phone: ''
      };
    },
     // 删除学生信息（通过学号唯一标识删除）
    handleDelete(row) {
      // 1. 弹出确认框，避免误操作
      this.$confirm(
        `确定要删除学生【${row.name}】（学号：${row.studentId}）的信息吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning' // 警告类型弹窗
        }
      )
      .then(() => {
        // 2. 确认后删除：通过学号筛选（学号唯一，避免同名误删）
        this.tableData = this.tableData.filter(item => item.studentId !== row.studentId);
        // 3. 同步更新原始数据（确保查询时也不会显示已删除数据）
        this.originalTableData = this.originalTableData.filter(item => item.studentId !== row.studentId);
        // 4. 删除成功提示
        this.$message({ type: 'success', message: '删除成功！' });
      })
      .catch(() => {
        // 5. 取消删除提示
        this.$message({ type: 'info', message: '已取消删除' });
      });
    }
  }
}

</script>
<style lang="scss">
.el-table .warning-row {
  background: rgb(242, 226, 232);
}

.el-table .success-row {
  background: #f7d8fa;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>